import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { add, asyncCount } from '../store'
export default function Count() {
  // 用于过滤诗句
  const obj = useSelector((state) => {
    // state是redux中所有数据
    // console.log(state)
    return { c: state.xxx.c, loading: state.xxx.loading } // return结果就是useSelector的返回值
  })
  // 用于返回dispatch函数
  const dispatch = useDispatch()
  return (
    <div>
      <h1>{obj.c}</h1>
      {obj.loading && <div style={{ color: 'red' }}>正在计算,请稍等...</div>}
      <button
        onClick={() => {
          dispatch(add(6))
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          console.log(asyncCount())
          dispatch(asyncCount())
        }}
      >
        async+
      </button>
    </div>
  )
}
